<template>
  <div class="search">
     <input type="text" :placeholder="placeholder" :maxlength="maxlength" v-model="keyword" @input="search()">
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import getData from '@/services'
import { useStore } from 'vuex'
import { formatUserDate } from '@/libs/utils'
import { watch } from '@vue/runtime-core'
export default {
  props: {
    placeholder:String,
    maxlength:Number
  },
  setup(props){
    const keyword = ref('')
    const store = useStore()
    const search = () => {
      const field = store.state.field
      if(keyword.value.length === props.maxlength){
        getData(store,field,formatUserDate(keyword.value))
      }     
    }

    watch(
      () =>store.state.field,
      () =>{
        keyword.value = ''
      }
    )

    return{
      keyword,
      search
    }
  }
}
</script>

<style lang="less" scoped>
.search{
    position: fixed;  //固定定位，窗口滚动也不会移动
    top: .44rem;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 0.38rem;
    padding: .03rem .1rem;
    box-sizing: border-box;
    background: white;
    input{
        width: 100%;
        height: 100%;
        font-size:.14rem;
        border: 1px solid #ddd;
        text-indent: .1rem;
        border-radius: .05rem;
        &:focus{
            border-color: pink;
            box-shadow: 0 0 .02rem pink;  //阴影
            transition: all 0.3s;  // 过度，所有样式0.3秒内完成
        }
    }
    
}
</style>